package io.wongxd.demo.page

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import io.wongxd.solution.compose.composeTheme.*
import io.wongxd.solution.compose.custom.modalsheet.WModalSheet


/**
 * The small spacing.
 */
val SpacingSmall = 8.dp

/**
 * The medium spacing.
 */
val SpacingMedium = 16.dp

/**
 * Showcases the scroll support in the [ModalSheet] body.
 */
@Composable
fun ScrollableModalSheetScreen() {
    Scaffold() { padding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(padding)
                .padding(SpacingMedium)
        ) {
            var verticalScrollVisible by rememberSaveable { mutableStateOf(false) }
            var verticalScrollWithFixedVisible by rememberSaveable { mutableStateOf(false) }
            var lazyColumnVisible by rememberSaveable { mutableStateOf(false) }
            var lazyGridVisible by rememberSaveable { mutableStateOf(false) }

            var fixVisible by rememberSaveable { mutableStateOf(false) }

            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center,
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1f)
            ) {
                Button(onClick = { fixVisible = true }) {
                    Text(text = "fix")
                }

                Button(onClick = { verticalScrollVisible = true }) {
                    Text(text = "Vertical scroll")
                }

                Button(onClick = { verticalScrollWithFixedVisible = true }) {
                    Text(text = "Vertical scroll with fixed")
                }

                Button(onClick = { lazyColumnVisible = true }) {
                    Text(text = "Lazy list")
                }

                Button(onClick = { lazyGridVisible = true }) {
                    Text(text = "Lazy grid")
                }
            }

            FixModalSheet(visible = fixVisible, onVisibleChange = { fixVisible = it })

            ScrollableModalSheet(
                visible = verticalScrollVisible,
                onVisibleChange = { verticalScrollVisible = it }
            )

            ScrollableWithFixedPartsModalSheet(
                visible = verticalScrollWithFixedVisible,
                onVisibleChange = { verticalScrollWithFixedVisible = it }
            )

            LazyColumnModalSheet(
                visible = lazyColumnVisible,
                onVisibleChange = { lazyColumnVisible = it }
            )

            LazyGridModalSheet(
                visible = lazyGridVisible,
                onVisibleChange = { lazyGridVisible = it }
            )
        }
    }
}

@Composable
private fun FixModalSheet(
    visible: Boolean,
    onVisibleChange: (Boolean) -> Unit,
) {
    WModalSheet(
        visible = visible,
        shape = RoundedCornerShape(topStart = 10.dp, topEnd = 10.dp),
        onVisibleChange = onVisibleChange,
        cancelable = false
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(SpacingSmall),
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight(.6f)
                .padding(SpacingMedium)
                .systemBarsPadding()
                .verticalScroll(rememberScrollState())
        ) {
            Text(
                text = "fix",
                style = AppThemeHolder.textStyle.sp16.black()
            )

            Text(
                text = "close by state",
                style = AppThemeHolder.textStyle.sp16.appRed(),
                modifier = Modifier.click {
                    onVisibleChange.invoke(false)
                }
            )

            repeat(100) {
                Text(
                    text = "Item #$it",
                    style = AppThemeHolder.textStyle.sp16.black(),
                    modifier = Modifier.fillMaxWidth()
                )
            }
        }
    }
}

@Composable
private fun ScrollableModalSheet(
    visible: Boolean,
    onVisibleChange: (Boolean) -> Unit,
) {
    WModalSheet(
        visible = visible,
        shape = RoundedCornerShape(topStart = 10.dp, topEnd = 10.dp),
        onVisibleChange = onVisibleChange
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(SpacingSmall),
            modifier = Modifier
                .verticalScroll(rememberScrollState())
                .fillMaxWidth()
                .padding(SpacingMedium)
                .systemBarsPadding()
        ) {
            Text(
                text = "This Scrolls 1",
                style = AppThemeHolder.textStyle.sp16.black()
            )
            repeat(100) {
                Text(
                    text = "Item #$it",
                    style = AppThemeHolder.textStyle.sp16.black(),
                    modifier = Modifier.fillMaxWidth()
                )
            }
        }
    }
}

@Composable
private fun ScrollableWithFixedPartsModalSheet(
    visible: Boolean,
    onVisibleChange: (Boolean) -> Unit,
) {
    WModalSheet(
        visible = visible,
        onVisibleChange = onVisibleChange
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            Column(
                modifier = Modifier
                    .verticalScroll(rememberScrollState())
                    .systemBarsPadding()
                    .padding(
                        top = 56.dp,
                        bottom = 64.dp,
                        start = SpacingMedium,
                        end = SpacingMedium
                    )
            ) {
                repeat(100) {
                    Text(
                        text = "Item #$it",
                        style = AppThemeHolder.textStyle.sp16.black(),
                        modifier = Modifier.fillMaxWidth()
                    )
                }
            }
            Text(
                text = "Fixed Header",
                style = AppThemeHolder.textStyle.sp16.black(),
                modifier = Modifier
                    .background(MaterialTheme.colorScheme.surface)
                    .padding(SpacingMedium)
                    .systemBarsPadding()
            )
            Button(
                onClick = { onVisibleChange(false) },
                modifier = Modifier
                    .fillMaxWidth()
                    .align(Alignment.BottomCenter)
                    .padding(SpacingMedium)
                    .systemBarsPadding()
            ) {
                Text(text = "Fixed Button", style = AppThemeHolder.textStyle.sp16.black())
            }
        }
    }
}

@Composable
private fun LazyColumnModalSheet(
    visible: Boolean,
    onVisibleChange: (Boolean) -> Unit,
) {
    WModalSheet(
        visible = visible,
        onVisibleChange = onVisibleChange
    ) {
        LazyColumn(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(SpacingSmall),
            modifier = Modifier
                .fillMaxWidth()
                .padding(SpacingMedium)
                .systemBarsPadding()
        ) {
            item {
                Text(
                    text = "This Scrolls",
                    style = AppThemeHolder.textStyle.sp16.black(),
                )
            }

            items(100) {
                Text(
                    text = "Item #$it",
                    style = AppThemeHolder.textStyle.sp16.black(),
                    modifier = Modifier.fillMaxWidth()
                )
            }
        }
    }
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
private fun LazyGridModalSheet(
    visible: Boolean,
    onVisibleChange: (Boolean) -> Unit,
) {
    WModalSheet(
        visible = visible,
        onVisibleChange = onVisibleChange
    ) {
        LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            verticalArrangement = Arrangement.spacedBy(SpacingSmall),
            modifier = Modifier
                .fillMaxWidth()
                .padding(SpacingMedium)
                .systemBarsPadding()
        ) {
            items(100) {
                Text(
                    text = "Item #$it",
                    style = AppThemeHolder.textStyle.sp16.black(),
                    modifier = Modifier.fillMaxWidth()
                )
            }
        }
    }
}
